<template>
	<view class="search-page">
		<u-navbar :autoBack="true" :placeholder="true" bgColor="#ffffff" title="搜索"></u-navbar>
		<view class="search">
			<u--input v-model="keyword" placeholder="搜索关键词" @confirm="confirm" disabledColor="rgba(0,0,0,0.0)" prefixIcon="search"
				prefixIconStyle="font-size: 22px;color: #9799AA" shape="circle"
				placeholderStyle="color: #9799AA"></u--input>
		</view>
		<view class="user">
			<view class="user-item" v-for="(item,index) in list" :key="index"
				@click="$navTo.togo('/pages/index/details/index',{id:item.id})">
				<view class="head-box">
					<view class="head">
						<view class="avatar-container" :style="{
					      backgroundImage: 'url(' + (item.avatar 
					        ? (item.avatar.startsWith('http') ? item.avatar : 'https://m.lqvvvv.com' + item.avatar)
					        : 'https://m.lqvvvv.com/assets/static/index/head.png') + ')'
					    }">
							<image class="avatar-frame" :src="'https://m.lqvvvv.com' + item.avatar_round"
								mode="aspectFit" style="width: 115%; height: 115%; top: -7.5%; left: -7.5%;"></image>
						</view>
					</view>
				</view>
				<view class="user-right">
					<view class="user-top">
						<view class="top-left">
							<view class="name">
								{{item.nickname}}
							</view>
							<image class="user-sex" v-if="item.gender == 2" src="https://m.lqvvvv.com/assets/static/index/female0.png"
								mode=""></image>
							<image class="user-sex" v-else src="https://m.lqvvvv.com/assets/static/index/maleb.png" mode=""></image>
							<image class="user-leve" v-if="item.level == 1" src="https://m.lqvvvv.com/assets/static/index/grade1.png" mode="">
							</image>
							<image class="user-leve" v-if="item.level == 2" src="https://m.lqvvvv.com/assets/static/index/grade2.png" mode="">
							</image>
							<image class="user-leve" v-if="item.level == 3" src="https://m.lqvvvv.com/assets/static/index/grade3.png" mode="">
							</image>
						</view>
						<view class="status" v-if="item.online == 1">
							<view class="dot"></view>
							<view>在线</view>
						</view>
						<view v-if="item.online == 0"  @click.stop="goonline(item.id)">
							<u-button type="primary" color="linear-gradient(100deg, #83A2FF 0%, #FF9BC1 100%)" text="提前预约" size="mini" shape="circle"></u-button>
						</view>
					</view>
					<view class="hobby">
						{{item.age||'20'}} / {{item.types||'唱歌 / 跳舞'}}
					</view>
					<view class="user-bottom">
						<view class="place">
							<image src="https://m.lqvvvv.com/assets/static/index/location.png" mode=""></image>
							<view class="place-text">
								距你{{item.distance}}km
							</view>
						</view>
						<view class="quantity">
							<image src="https://m.lqvvvv.com/assets/static/index/heart.png" mode=""></image>
							<view class="place-text">
								{{item.views}}次心动
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				list:[],
				page: 1,
				status: 'loadmore',
				keyword:''
			}
		},
		onLoad() { 
			this.getList()
		},
		computed: {
			...mapState({
				location: state => state.location,
				city: state => state.city
			})
		},
		onReachBottom() {
			this.page = this.page + 1
			this.status = 'loading';
			this.getList()
		},
		methods:{
			goonline(){
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kfid/kfcb8f13051fb4e767f' //客服地址链接
					},
					corpId: 'ww3d05dfba76a348f3', //必须和你小程序上的一致
					success(res) {
						console.log(res, 1)
					},
					fail(res) {
						console.log(res, 2)
					},
				})
			},
			confirm(e){
				this.page = 1
				this.getList()
			},
			getList() {
				let params = {
					lat: this.location.latitude,
					lng: this.location.longitude,
					page: this.page,
					city:this.city,
					limit: 10,
					keyword:this.keyword
				}
				console.log(params)
				this.$Request({
					method: 'POST',
					url: '/api/friend/getList',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						if (res.data.data.length < 10) {
							this.status = 'nomore';
						}
						if (this.page == 1) {
							this.list = res.data.data
						} else {
							this.list = [...this.list, ...res.data.data]
						}
					}
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style scoped lang="scss">
	.search-page {
		padding: 30rpx;

		.search {
			width: 100%;
			background-color: #ffffff;
			border-radius: 40rpx;
			
		}
		.user {
			.user-item {
				background-color: #fff;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				margin-top: 30rpx;
		
				.head-box {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 190rpx;
					height: 190rpx;
				
					.head {
						/* 外层容器尺寸根据实际情况调整 */
						width: 120rpx;
						height: 120rpx;
					}
				
					.avatar-container {
					  position: relative;
					  width: 120rpx;
					  height: 120rpx;
					  background-repeat: no-repeat;
					  background-size: 100% 100%;
					  /* 关键：移除裁剪 */
					  overflow: visible;
					  border-radius: 50%; /* 如果需要圆形 */
					}
					
					.avatar-frame {
					  position: absolute;
					  z-index: 2;
					  pointer-events: none;
					}
				
				}
	
		
				.user-right {
					width: 70%;
		
					.user-top {
						display: flex;
						justify-content: space-between;
						align-items: center;
		
						.top-left {
							display: flex;
							align-items: center;
		
							.name {
								font-size: 28rpx;
								color: #2E314A;
								margin-right: 10rpx;
							}
		
							.user-sex {
								margin-right: 10rpx;
								width: 24rpx;
								height: 24rpx;
							}
		
							.user-leve {
								width: 111rpx;
								height: 63rpx;
							}
						}
		
						.status {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color: #1AC97F;
						
							.dot {
								width: 12rpx;
								height: 12rpx;
								border-radius: 50%;
								background-color: #1AC97F;
								margin-right: 10rpx;
							}
						}
						.status2{
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color: #666;
							
							.dot {
								width: 12rpx;
								height: 12rpx;
								border-radius: 50%;
								background-color: #666;
								margin-right: 10rpx;
							}
						}
					}
		
					.hobby {
						color: #9799AC;
						font-size: 24rpx;
					}
		
					.user-bottom {
						display: flex;
						justify-content: space-between;
						font-size: 24rpx;
						margin-top: 20rpx;
		
						.place {
							color: #8B8DA0;
							display: flex;
							align-items: center;
		
							image {
								margin-right: 5rpx;
								width: 20rpx;
								height: 20rpx;
							}
						}
		
						.quantity {
							color: #B76CF7;
							display: flex;
							align-items: center;
		
							image {
								width: 27.79rpx;
								height: 26.45rpx;
								margin-right: 5rpx;
							}
						}
					}
				}
			}
		}
	}
</style>